<script lang="ts" setup>
import { Snackbar } from "@varlet/ui";
import vScollX from "~/directives/scrollX";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  isEdit: {
    type: Boolean,
    default: true,
  },
  data: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
});

const emit = defineEmits(["change", "update:modelValue"]);

const tags = ref(props.data);
const input = ref("");
const isShowInput = ref(false);
const selectTags = ref(new Array<string>());
const inputTags = ref(new Array<string>());

function init() {
  const _tags = props.modelValue.split(",");
  selectTags.value = tags.value.filter((item) => _tags.includes(item));
}
init();

function selectTag(tag: string) {
  if (selectTags.value.includes(tag)) {
    selectTags.value = selectTags.value.filter((item) => item !== tag);
    change();
    return;
  }
  selectTags.value.push(tag);
  change();
}

function inpuTag(e: Event) {
  e.stopPropagation();
  e.preventDefault();
  if (!input.value.trim()) {
    isShowInput.value = false;
    return;
  }
  if (tags.value.includes(input.value)) {
    Snackbar.error("已存在该tag");
    return;
  }
  inputTags.value.push(input.value);
  input.value = "";
  isShowInput.value = false;
  change();
}

function removeInputTag(tag: string) {
  inputTags.value = inputTags.value.filter((item) => item !== tag);
  change();
}

const tagsStr = computed(() => {
  const tags = [...selectTags.value, ...inputTags.value];
  return tags.join(",");
});

function change() {
  emit("update:modelValue", tagsStr.value);
  emit("change", tagsStr.value);
}
</script>

<template>
  <div
    class="tagsBody"
    v-scoll-x
  >
    <span
      v-if="props.isEdit"
      class="option"
      :style="{
        gridColumn: isShowInput ? 'span 3' : 'span 1',
      }"
    >
      <var-button
        text
        style="width: 100%; background-color: #f0f0f0"
        v-if="!isShowInput"
        @click="isShowInput = true"
        round
      >
        <var-icon name="plus" />
      </var-button>
      <var-input
        v-else
        variant="outlined"
        size="small"
        style="min-width: 10em"
        @keydown.enter="inpuTag($event)"
        v-model="input"
        placeholder="输入tag..."
      ></var-input>
    </span>
    <template
      v-if="props.isEdit"
      v-for="item in inputTags"
    >
      <var-chip
        class="item"
        closable
        @close="removeInputTag(item)"
        @click="selectTag(item)"
        type="primary"
        size="small"
        >{{ item }}</var-chip
      >
    </template>
    <template v-for="item in tags">
      <var-chip
        class="item"
        @click="selectTag(item)"
        size="small"
        :type="selectTags.includes(item) ? 'primary' : 'default'"
        >{{ item }}</var-chip
      >
    </template>
  </div>
</template>

<style lang="less" scoped>
.tagsBody {
  display: flex;
  flex-wrap: nowrap;
  gap: 1em;
  overflow: auto;
  place-items: center;
  padding: 0.5em 0;
  .option {
    grid-column: span 2;
    display: grid;
    place-items: center;
  }
  .item {
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
  }
}
</style>
